<template>
  <div class="app-container">
    <!--  表单  -->
    <div class="app-container-search">
      <el-form size="small" :model="form" :inline="true" label-width="90px">
        <el-form-item label="设备名称">
          <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="状态:">
          <el-select placeholder="请选择" style="width:180px;" clearable>
            <el-option label="item.name" value="item.id"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="getDataList">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>


    <div class="app-container-search handle">
      <el-form size="small" :inline="true" label-width="90px">
        <!-- <el-form-item>
          <el-button size="small" icon="el-icon-plus" type="primary" @click="openDialog">新增</el-button>
        </el-form-item> -->
        <el-form-item>
          <el-button size="small" icon="el-icon-download" type="primary" plain>导出</el-button>
        </el-form-item>
      </el-form>
      <el-radio-group v-model="tabPosition" class="tabPosition">
        <el-radio-button label="list"><i class="el-icon-s-operation"></i></el-radio-button>
        <el-radio-button label="pic"><i class="el-icon-menu"></i></el-radio-button>
      </el-radio-group>
    </div>

    <!-- <el-divider></el-divider> -->



    <div class="picBox" v-show="tabPosition == 'pic'">
      <div class="picBoxItem" v-for="item in tableData" :key="item.productKey"
        :class="item.status == 0 ? 'noLineBgc' : 'onLineBgc'">
        <div class="picBoxState">
          <div class="picBoxStateBall" :class="item.status == 0 ? 'noLine' : 'onLine'"></div>
          <div class="picBoxStateText" style="color:#F56C6C" v-if="item.status == 0">关闭</div>
          <div class="picBoxStateText" style="color:#67C23A" v-if="item.status == 1">开启</div>
        </div>
        <img class="picBoxImg" src="../../../../assets/img/chanpin.png" alt="">
        <div class="picBoxItemLine">
          <img class="picBoxItemLogo" src="../../../../assets/img/logo2.png" alt="">
          <div class="picBoxItemName">{{ item.name }}</div>
        </div>
        <div class="picBoxItemLine">
          <div class="picBoxItemTitle">所属产品</div>
          <div class="picBoxItemText">{{ item.productName }}</div>
          <!-- <div class="picBoxItemText" v-show="item.nodeType == 0">设备</div>
          <div class="picBoxItemText" v-show="item.nodeType == 1">网关</div> -->
        </div>
        <div class="picBoxItemLine">
          <div class="picBoxItemTitle">生产厂商</div>
          <div class="picBoxItemText">{{ item.manufacturersName }}</div>
        </div>
        <div class="picBoxItemLine">
          <div class="picBoxItemTitle">安装地址</div>
          <div class="picBoxItemText">{{ item.address }}</div>
        </div>
        <div class="picBoxItemLine">
          <div class="picBoxItemTitle">负责区域</div>
          <div class="picBoxItemText">{{ item.area }}</div>
        </div>
        <div class="picBoxItemLine">
          <!-- <div class="picBoxItemTitle">设备类型</div> -->
          <!-- <div class="picBoxItemText">网关子设备</div> -->
          <!-- <div class="picBoxItemText" v-show="item.dataFormat == 0">是</div>
          <div class="picBoxItemText" v-show="item.dataFormat == 1">否</div> -->
        </div>
        <!-- <div class="picBoxItemLine">
          <div class="picBoxItemTitle">设备数量</div>
          <div class="picBoxItemText">{{ item.deviceCount }}</div>
        </div> -->
        <div class="picLine"></div>
        <div class="picBtnBox">
          <el-button size="mini" type="warning" plain class="picBtn" @click="goDetail(item)"><i
              class="el-icon-view"></i>
            详情</el-button>
          <el-button style="margin-right: 10px;" size="mini" type="primary" plain class="picBtn"
            @click="showChange(item)"><i class="el-icon-edit"></i> 编辑</el-button>
          <el-button slot="reference" size="mini" type="success" plain class="picBtn" @click="getRules(item)"><i
              class="el-icon-document"></i>
            规则</el-button>




          <!-- <el-button size="mini" type="danger" plain class="picBtnDelete" @click="deleteDevice(item)"><i
              class="el-icon-delete"></i></el-button> -->
        </div>
      </div>
    </div>


    <!-- 设备规则弹窗 -->
    <el-dialog title="设备规则" :visible.sync="showDeviceRule" width="50%">
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-star-on"></i>
            设备名称
          </template>
          <el-tag size="small">{{ deviceDetail.name }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>

          <template slot="label">
            <i class="el-icon-s-grid"></i>
            所属产品
          </template>
          {{ deviceDetail.productName }}
        </el-descriptions-item>
        <el-descriptions-item>

          <template slot="label">
            <i class="el-icon-s-promotion"></i>
            生产厂商
          </template>
          {{ deviceDetail.manufacturersName }}
        </el-descriptions-item>
        <el-descriptions-item>

          <template slot="label">
            <i class="el-icon-location-outline"></i>
            安装地址
          </template>
          {{ deviceDetail.address }}
        </el-descriptions-item>
        <el-descriptions-item>

          <template slot="label">
            <i class="el-icon-map-location"></i>
            负责区域
          </template>
          {{ deviceDetail.area }}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider></el-divider>

      <div class="ruleBox">
        <el-card shadow="never" class="ruleItem" v-for="item in Rules" :key="item.id">
          <div @click="createInstruct(item)" style="width: 100%;height:100%;">
            <i class="el-icon-thumb" style="margin-right: 10px;"></i>
            <span>{{ item.name }}</span>
          </div>
        </el-card>
      </div>
    </el-dialog>

    <!-- 设备指令弹窗 -->
    <el-dialog :title="instructName" :visible.sync="showDeviceInstruct" width="50%">
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item>

          <template slot="label">
            <i class="el-icon-document"></i>
            指令编号
          </template>
          <el-tag size="small">{{ instructDetail.instruction }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>

          <template slot="label">
            <i class="el-icon-files"></i>
            指令内容
          </template>
          {{ instructDetail.code }}
        </el-descriptions-item>
      </el-descriptions>

      <div slot="footer" class="dialog-footer">
        <el-button @click="showDeviceInstruct = false">取消指令</el-button>
        <el-button type="primary" @click="comfirmCreate">确认指令</el-button>
      </div>

    </el-dialog>



    <!-- 表格 -->
    <el-table size="medium" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange"
      v-show="tabPosition == 'list'">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="设备名称" align="center"></el-table-column>
      <el-table-column prop="no" label="设备出厂编号" align="center"></el-table-column>
      <!-- <el-table-column prop="imei" label="设备IMEI" align="center">
      </el-table-column> -->
      <el-table-column prop="productName" label="所属产品" align="center"></el-table-column>
      <el-table-column prop="manufacturersName" label="生产厂商" align="center"></el-table-column>
      <el-table-column prop="address" label="安装地址" align="center"></el-table-column>
      <el-table-column prop="area" label="负责区域" align="center"></el-table-column>
      <!-- <el-table-column prop="meterNo" label="表编号" align="center"></el-table-column> -->

      <!-- <el-table-column prop="paymode" label="付费方式" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.paymode == 0">后付费</span>
          <span v-if="scope.row.paymode == 1">预付费</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="signalNum" label="信号强度" align="center"></el-table-column> -->
      <!-- <el-table-column prop="" label="表具状态" align="center"></el-table-column> -->
      <!-- <el-table-column prop="" label="设备安装地址" align="center"></el-table-column> -->
      <!-- <el-table-column prop="" label="设备负责区域" align="center"></el-table-column> -->
      <!-- <el-table-column prop="state" label="设备开关" align="center" width="170">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="openDevice">开阀</el-button>
          <el-button size="mini" type="danger" plain @click="closeDevice(scope.row)">关阀</el-button>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="150">

        <template slot-scope="scope">
          <div style="width: 100%;display:flex;justify-content: space-around;">
            <!-- <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
              <i class="el-icon-view" style="color: #1890FF;" @click="goDetail(scope.row)"></i>
            </el-tooltip> -->
            <!-- <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
              <i @click="openChange(scope.row)" class="el-icon-edit-outline" style="color: #1890FF;"></i>
            </el-tooltip> -->
            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
              <i @click="showChange(scope.row)" class="el-icon-edit-outline" style="color: #1890FF;"></i>
            </el-tooltip>
            <!-- <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <i @click="deleteDevice(scope.row)" class="el-icon-delete" style="color: red;"></i>
            </el-tooltip> -->

          </div>
        </template>
      </el-table-column>

    </el-table>
    <!-- 表格 -->


    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>

    <!-- 添加编辑弹窗 -->
    <el-dialog title="编辑设备" :visible.sync="editDevice" width="50%">
      <el-form :label-position="labelPosition" label-width="100px" inline="true">
        <el-form-item label="设备名称">
          <el-input v-model="updateDevice.name" style="width:300px" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备安装地址">
          <el-input v-model="updateDevice.address" style="width:300px" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备服务区域">
          <el-input v-model="updateDevice.area" style="width:300px" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属产品">
          <el-select placeholder="请选择" style="width:300px;" clearable v-model="updateDevice.productId">
            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生产厂商">
          <el-select placeholder="请选择" style="width:300px;" clearable v-model="updateDevice.manuId">
            <el-option v-for="item in manufacturerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDevice = false">取 消</el-button>
        <el-button type="primary" @click="comfirmEdit">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 添加编辑弹窗 -->
    <!-- <el-dialog :title="title" :visible.sync="dialogHandle" width="40%">
      <el-form :label-position="labelPosition" label-width="100px" inline="true">
        <el-form-item label="设备名称">
          <el-input v-model="updateDeviceOther.deviceName" style="width:300px" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="操作者">
          <el-input v-model="updateDeviceOther.operator" style="width:300px" placeholder="请输入" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogHandle = false">取 消</el-button>
        <el-button type="primary" @click="comfirmBtn">确 定</el-button>
      </div>
    </el-dialog> -->



  </div>
</template>

<script>
import { getList, updateDevice, deleteDevice, deviceDetail, editDevice, controlDevice } from '@/api/MaintainView/MaintainMaterial/index.js'
import { getProduct } from '@/api/ProductManage/index.js'
import { getManufacturer } from '@/api/ManufacturerManage/index.js'
import { getRules, getInstruct, comfirmInstruct } from '@/api/MaintainView/MaintainMaterial/index.js'



export default {
  data() {
    return {
      instructName: "",
      instructDetail: {},
      showDeviceInstruct: false,
      deviceDetail: {},
      showDeviceRule: false,
      Rules: "",
      editDevice: false,
      dialogHandle: false,
      title: "",
      tabPosition: "pic",
      labelPosition: "right",
      form: {
        name: "",
        current: 0,
        pageSize: 10,
      },
      formHandle: {

      },
      updateDeviceOther: {

      },
      tableData: [],
      CampusList: [],
      buildName: [],
      ProblemType: [],
      MaintainerList: [],
      timeNow: "",
      total: 0,
      fileList: [],
      updateDevice: {
        id: "",
        name: "",
        address: "",
        area: "",
        productId: "",
        manuId: ""
      },
      productList: [],
      manufacturerList: []
    }
  },

  methods: {
    comfirmCreate() {
      comfirmInstruct(
        {
          deviceId: this.deviceDetail.id,
          instruction: this.instructDetail.instruction,
          code: this.instructDetail.code
        }
      ).then(res => {
        if (res.data.success) {
          this.$message({
            message: '指令下发成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.showDeviceRule = false
              this.showDeviceInstruct = false

              this.getList()
            }
          })
        } else {
          this.$message({
            message: res.data.message,
            duration: 2000,
          })
        }
      })
    },
    createInstruct(e) {
      this.showDeviceInstruct = true
      this.instructName = e.name
      getInstruct(
        {
          rulesId: e.id,
          deviceId: this.deviceDetail.id,
        }
      ).then(res => {
        if (res.data.success == true) {
          this.instructDetail = res.data.data
        }
      })
    },
    getRules(e) {
      this.deviceDetail = e
      this.showDeviceRule = true
      getRules({ manuId: e.manuId }).then(res => {
        if (res.data.success == true) {
          this.Rules = res.data.data
        }
      })
    },
    openDevice() {

    },
    closeDevice(e) {
      controlDevice({
        uid: e.uid,
        unitCode: 'c127-30',
        imei: e.meterAddress,
        menufactNo: e.meterNo,
        action: 99
      }).then(res => {

      })
    },
    showChange(e) {
      this.updateDevice.id = e.id
      this.updateDevice.name = e.name
      this.updateDevice.address = e.address
      this.updateDevice.area = e.area
      this.updateDevice.productId = e.productId
      this.updateDevice.manuId = e.manuId
      this.editDevice = true
    },
    comfirmEdit() {
      editDevice(this.updateDevice).then(res => {
        if (res.data.success == true) {
          this.$message({
            message: '操作成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.editDevice = false
              this.getList()
            }
          })
        } else {
          this.$message(res.data.message)
        }
      })
    },
    deleteDevice(e) {
      this.$confirm('此操作将删除该设备, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDevice(
          {
            masterKey: e.masterKey,
            productId: e.productId,
            deviceIds: e.deviceId,
            id: e.id
          }).then(res => {
            if (res.data.success == true) {
              this.$message({
                message: '删除成功!',
                duration: 1000,
                type: 'success',
                onClose: () => {
                  this.getList()
                }
              })
            } else {
              this.$message({
                message: res.data.message,
                duration: 2000,
              })
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    goDetail(e) {
      // this.$router.push('./DeviceDetail')
      this.$router.push({ name: 'DeviceDetail', params: e })

    },
    handleSelectionChange() {

    },
    openDialog() {
      this.title = '新增'
      this.dialogHandle = true
    },
    openChange(e) {
      this.title = '编辑'
      this.dialogHandle = true
      this.formHandle.id = e.id
      this.formHandle.deviceId = e.deviceId
      this.formHandle.masterKey = e.masterKey
      this.updateDeviceOther.productId = e.productId
    },
    comfirmBtn() {
      this.formHandle.updateDeviceOther = this.updateDeviceOther
      updateDevice(this.formHandle).then(res => {
        if (res.data.success == true) {
          this.dialogHandle = false
          this.$message.success('操作成功')
          this.getList()
        }
      })
    },
    //重置
    reset() {
      this.form = {
        name: "",
        current: 0,
        pageSize: 10,
      },
        this.getList()
    },
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss;
      console.log(_this.gettime)
      this.timeNow = _this.gettime
    },
    // 下载模板
    downLoad() {
      downLoad().then(res => {
        const link = document.createElement('a')  //创建a标签
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) //设置文件流
        link.style.display = 'none'// 设置连接
        link.href = URL.createObjectURL(blob)  //将文件流转化为blob地址
        this.getCurrentTime()
        link.download = '维修单模板_' + this.timeNow
        document.body.appendChild(link) // 模拟点击事件
        link.click()  //设置点击事件
        this.$message.success('下载成功！')
      })
    },
    //导出维修单信息
    exportForm() {
      exportForm(this.form).then(res => {
        const link = document.createElement('a')  //创建a标签
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) //设置文件流
        link.style.display = 'none'// 设置连接
        link.href = URL.createObjectURL(blob)  //将文件流转化为blob地址
        this.getCurrentTime()
        link.download = '维修单统计报表_' + this.timeNow
        document.body.appendChild(link) // 模拟点击事件
        link.click()  //设置点击事件
        this.$message.success('导出成功！')


      })
    },
    beforeUpload(file) {
      // 校验
      let legalName = ["xlsx", "xls"];
      // 拿到后缀名
      let name = file.name.substring(
        file.name.lastIndexOf(".") + 1,
        file.name.length
      );
      if (legalName.includes(name)) {
      } else {
        this.$message.info("文件格式不对,仅限xls和xlsx");
        return false;
      }
    },
    // 导入维修单信息
    uploadHttpRequest(data) {
      let fd = new FormData()
      fd.append('file', data.file)
      uploadMaintain(fd).then(res => {
        if (res.data.success == true) {
          this.$message.success("导入成功！")
          this.reset()
        } else {
          this.$message({
            message: res.data.message,
            duration: 3000
          })
        }
      })

    },
    handleCurrentChange(e) {
      //当前页
      this.form.current = (e - 1) * 10
      this.getForm()
    },
    handleSizeChange(e) {
      this.form.pageSize = e
      this.getForm()

    },
    // 查询按钮
    getDataList() {
      this.form.current = 0
      this.getList()
    },
    //查询列表
    getList() {
      getList(this.form).then(res => {
        this.getProduct()
        this.getManufacturer()
        if (res.data.success == true) {

          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    },
    // 查询产品
    getProduct() {
      getProduct(
      ).then(res => {
        if (res.data.success == true) {
          this.productList = res.data.data
        }
      })
    },
    // 查询厂商
    getManufacturer() {
      getManufacturer(
      ).then(res => {
        if (res.data.success == true) {
          this.manufacturerList = res.data.data
        }
      })
    }
  },
  created() {
    // nizhidaoma
    this.getList()

  },
};
</script>

<style lang="scss" scoped>
.dialogbutton {
  margin-right: 40%;
}

.pagination {
  float: right;
  margin-top: 10px;
}

.noLine {
  background-Color: #F56C6C
}

.online {
  background-Color: #67C23A
}

.noLineBgc {
  background: linear-gradient(to right, #FFF5F5, #FFFFFF);

}

.onLineBgc {
  background: linear-gradient(to right, #F2FBFF, #FFFFFF);

}

.ruleBox {
  // display: flex;
}

.ruleItem {
  cursor: pointer;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #277dd3;
  // background-color: #f2f9ff;
  background: linear-gradient(to right, #f2f9ff, white);
}

.ruleItem:hover {
  box-shadow: 6px 1px 10px 4px #d2d2d2;
}
</style>
